<template>
  <div class="like-component">
    <!-- 点赞按钮 -->
    <button
      @click="toggleLike"
      :class="{ 'liked': isLiked }"
      class="like-button"
      v-if="!isLiked && store.isLoggedIn"
    >
      <i class="fa fa-thumbs-up" ></i>
      喜欢({{ likeCount }})
    </button>
    <button
      @click="toggleLike"
      :class="{ 'liked': isLiked }"
      class="like-button"
      v-if="isLiked && store.isLoggedIn"
    >
      <i class="fa fa-thumbs-down" ></i>
      取消喜欢({{ likeCount }})
    </button>
    <!-- 打赏按钮 -->
    <button class="reward-button" @click="toggleReward" v-if="isReward">
      <i class="fa fa-usd"></i> 打赏
    </button>

    <!-- 分享按钮 -->
    <button class="share-button" @click="toggleShare">
      <i class="fa fa-share-alt"></i> 分享
    </button>
    <!--收藏按钮-->
   <button
  class="collect-button"
  @click="toggleCollect"
  :class="{ 'collected': isCollected }"
  v-if="store.isLoggedIn"
>
  <i class="fa fa-star"></i>
  {{ isCollected ? '已收藏' : '收藏' }}
</button>
  </div>

  <!-- 分享选项 -->
  <div v-if="showShareOptions" class="share-options">
    <button @click="shareTo('qq')"><i class="fab fa-qq"></i></button>
    <button @click="shareTo('qqspace')"><i class="fa fa-star"></i></button>
    <button @click="shareTo('weibo')"><i class="fab fa-weibo"></i></button>
    <button @click="shareTo('wechat')"><i class="fab fa-weixin"></i></button>
    <button @click="shareTo('image')"><i class="fa fa-camera"></i></button>
  </div>

  <!-- 打赏弹窗 -->
  <div v-if="showRewardPopup" class="reward-popup">
    <div class="reward-header">
      用金钱砸我吧，我挺得住！！！
      <button @click="toggleReward" class="close-btn">×</button>
    </div>
    <div class="reward-body">
      <div class="reward-item">
        <img :src="rewardlist.wechat_reward_qrcode" alt="微信" />
        <p>微信支付</p>
      </div>
      <div class="reward-item">
        <img :src="rewardlist.alipay_reward_qrcode" alt="支付宝" />
        <p>支付宝</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import {useUserStore} from '@/stores/userStore'

const store = useUserStore();
const emit = defineEmits(['collect-updated']);
// 接收props
const props = defineProps({
  articleId: {
    type: Number,
    required: true,
  },
});
// 控制分享选项和打赏弹窗的状态
const showShareOptions = ref(false);
const showRewardPopup = ref(false);


// 点赞状态
const isLiked = ref(false);
const likeCount = ref(0);
// 收藏状态
const isCollected = ref(false);
const collectCount = ref(0);
// 打赏列表
const isReward = ref(false);
const rewardlist = ref([]); // 打赏列表
const getRewardList = () => {
  axios.get('/api/blog/siteinfo/get_reward_info/',{ requiresAuth: false }).then(res => {
    rewardlist.value = res.data;
    isReward.value = res.data.is_reward;
  });
}
// 监听props变化
//查询点赞状态
watchEffect(() => {
  // 仅在已登录时查询状态
  if (store.isLoggedIn) {
    // 查询点赞状态
    axios.get('/api/cms/articles/'+props.articleId+'/check_like/',{ requiresAuth: true }).then(res => {
      isLiked.value = res.data.isliked;
      likeCount.value = res.data.like_count;
    });
    // 查询收藏状态
    axios.get('/api/cms/articles/'+props.articleId+'/check_collect/',{ requiresAuth: true }).then(res => {
      isCollected.value = res.data.is_collected;
      collectCount.value = res.data.collect_count;
    });
  }
});

// 更新点赞
const toggleLike = async () => {
  try {
    const res = await axios.post('/api/cms/articles/'+props.articleId+'/like/',{}, {requiresAuth: true} );
    isLiked.value = !isLiked.value;
    likeCount.value = res.data.like_count;
    console.log(res.data);
  } catch (error) {
    console.log(error);
  }
};
// 添加收藏方法
const toggleCollect = async () => {
  try {
    const res = await axios.post('/api/cms/articles/'+props.articleId+'/collect/',{},{ requiresAuth: true });
    isCollected.value = !isCollected.value;
    collectCount.value = res.data.collect_count;
     // 触发事件并传递最新收藏数
     emit('collect-updated', res.data.collect_count);
  } catch (error) {
    console.log(error);
  }
};

// 切换分享选项显示
const toggleShare = () => {
  showShareOptions.value = !showShareOptions.value;
};

// 切换打赏弹窗显示
const toggleReward = () => {
  showRewardPopup.value = !showRewardPopup.value;
};

// 分享到对应平台
const shareTo = (platform) => {
  let url;
  switch (platform) {
    case "qq":
      alert("分享到 QQ");
      url = "https://mail.qq.com/";
      break;
    case "qqspace":
      alert("分享到 QQ 空间");
      url = "https://qzone.qq.com/";
      break;
    case "weibo":
      alert("分享到 微博");
      url = "https://weibo.com/";
      break;
    case "wechat":
      alert("分享到 微信");
      break;
    case "image":
      alert("生成分享图功能");
      break;
    default:
      alert("未知操作");
  }
  if (url) window.open(url, "_blank");
};
onMounted(() => {
  getRewardList();
  store.checkLoginStatus();
});
</script>

<style scoped>
.like-component {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

/* 按钮通用样式 */
button {
  font-size: 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.like-button {
  padding: 5px 12px;
  color: #007bff;
  border-color: #007bff;
  background-color: var(--article-detail-bg-color,#fff);
}
.like-button:hover {
  color: #fff;
  background-color: #007bff;
}

.reward-button {
  padding: 5px 12px;
  color: #dc3545;
  border-color: #dc3545;
  background-color: var(--article-detail-bg-color,#fff);
}
.reward-button:hover {
  color: #fff;
  background-color: #dc3545;
}
.collect-button {
  padding: 5px 12px;
  color: #ffc107;
  border-color: #ffc107;
  background-color: var(--article-detail-bg-color,#fff);
}
.collect-button:hover {
  color: #fff;
  background-color: #ffc107;
}
.collect-button.collected {
  background-color: #ffc107;
  color: #fff;
}
.share-button {
  padding: 5px 12px;
  color: #28a745;
  border-color: #28a745;
  background-color: var(--article-detail-bg-color,#fff);
}
.share-button:hover {
  color: #fff;
  background-color: #28a745;
}

/* 分享选项样式 */
.share-options {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 10px;
}

.share-options button {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  font-size: 14px;
  border: 1px solid transparent;
  cursor: pointer;
  background-color: var(--article-detail-bg-color,#fff);
}
.share-options button:nth-child(1) {
  border: 1px solid #17a2b8;
  color: #17a2b8;
}
.share-options button:nth-child(1):hover {
  background-color: #17a2b8;
  color: #fff;
}
.share-options button:nth-child(2) {
  border: 1px solid #007bff;
  color: #007bff;
}
.share-options button:nth-child(2):hover {
  background-color: #007bff;
  color: #fff;
}

.share-options button:nth-child(3) {
  border: 1px solid #dc3545;
  color: #dc3545;
}
.share-options button:nth-child(3):hover {
  background-color: #dc3545;
  color: #fff;
}

.share-options button:nth-child(4) {
  border: 1px solid #28a745;
  color: #28a745;
}
.share-options button:nth-child(4):hover {
  background-color: #28a745;
  color: #fff;
}

.share-options button:nth-child(5) {
  border: 1px solid #343a40;
  color: #4183c4;
}
.share-options button:nth-child(5):hover {
  background-color: #4183c4;
  color: #fff;
}

/* 打赏弹窗样式 */
.reward-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--article-detail-bg-color,#f8f8f8);
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  width: 300px;
  text-align: center;
  z-index: 9999;
}

.reward-header {
  font-size: 16px;
  font-weight: bold;
  background-color: var(--article-button-bg-color,#17a2b8);
  color: #fff;
  padding: 10px;
  border-radius: 10px 10px 0 0;
  position: relative;
}

.close-btn {
  position: absolute;
  right: 10px;
  top: 5px;
  cursor: pointer;
  background: none;
  border: none;
  font-size: 22px;
  color: #fff;
}

.reward-body {
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
}

.reward-item {
  text-align: center;
}

.reward-item img {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  margin-bottom: 5px;
}

.reward-item p {
  font-size: 14px;
  color: #333;
}
</style>
